<template>
  <div class="app-container home">
    <!-- 主要内容区 -->
    <div class="main-content">
      <!-- 左侧科目分类 -->
      <div class="subject-categories">
        <div v-for="item in categoryList" :key="item.categoryId" class="category-item" @click="goToSubject(item)">
          <div class="category-icon">
            <img :src="item.icon" alt="科目图标" style="width: 40px; height: 40px;">
          </div>
          <span>{{ item.categoryName }}</span>
        </div>
      </div>

      <!-- 中间轮播图和公告区域 -->
      <div class="center-section">
        <!-- 轮播图区域 -->
        <div class="carousel-section">
          <el-carousel height="350px" :interval="5000" arrow="always" indicator-position="outside">
            <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
              <div class="carousel-content">
                <img :src="item.image" :alt="item.title">
                <div class="carousel-overlay">
                  <h3>{{ item.title }}</h3>
                  <p>{{ item.description }}</p>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>

        <!-- 公告区域 -->
        <div 
          class="notification-section" 
          v-if="notificationList.length > 0"
          @click="handleOpenNotification"
          :class="{ 'notification-active': notificationDialogVisible }"
          ref="notificationSection"
        >
          <i class="el-icon-bell notification-icon"></i>
          <el-carousel height="30px" direction="vertical" :autoplay="true" indicator-position="none" :interval="3000">
            <el-carousel-item v-for="item in notificationList" :key="item.msgId">
              <div class="notification-item" :title="item.content">{{ item.content }}</div>
            </el-carousel-item>
          </el-carousel>
        </div>

        <!-- 底部功能区 -->
        <div class="function-area">
          <div class="function-card request-tutor" @click="goToRequestTutor">
            <div class="card-content">
              <h3>请家教</h3>
              <p>快速发布家教需求</p>
            </div>
          </div>
          <div class="function-card become-tutor" @click="goToBecomeTutor">
            <div class="card-content">
              <h3>做家教</h3>
              <p>海量家教任务等你来</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧登录区域 -->
      <div class="right-section">
        <div class="platform-logo">
          <img src="@/assets/logo/logo_yxb.png" alt="平台logo">
        </div>
        <div class="login-container">
          <el-button type="success" class="login-button" @click="$router.push('/login')">家长登录</el-button>
          <el-button type="primary" class="login-button" @click="$router.push('/login')">教员登录</el-button>
        </div>
        <!-- 推荐教员列表 -->
        <div class="featured-tutors" v-if="teacherList.length > 0">
          <h4>推荐教员</h4>
          <ul>
            <li v-for="teacher in teacherList.slice(0, 3)" :key="teacher.userId" @click="goToTeacherDetail(teacher)" class="tutor-item">
              <img :src="teacher.avatar || defaultAvatar" alt="教员头像" class="tutor-avatar-small">
              <div class="tutor-info-small">
                <span class="tutor-name">{{ teacher.teacherName }}</span>
                <span class="tutor-school">{{ teacher.school }}</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 教员推荐区域 -->
    <div class="teacher-section">
      <h2 class="section-title">认证教员</h2>
      <div class="teacher-list">
        <div v-for="teacher in teacherList" :key="teacher.teacherId" class="teacher-card"
          @click="goToTeacherDetail(teacher)">
          <div class="teacher-avatar">
            <img :src="teacher.avatar" :alt="teacher.teacherName">
          </div>
          <div class="teacher-info">
            <h3 class="teacher-name">{{ teacher.teacherName }}</h3>
            <p class="teacher-school">{{ teacher.school }}</p>
            <p class="teacher-subject">擅长：{{ teacher.teachingcategoryName }}</p>
            <!-- <el-rate v-model="teacher.rating" disabled show-score text-color="#ff9900" score-template="{value}分">
            </el-rate> -->
            <!-- 只显示星级，不显示分数了 -->
            <el-rate v-model="teacher.rating" disabled text-color="#ff9900">
            </el-rate>
          </div>
        </div>
      </div>
    </div>

    <!-- 系统公告弹窗 -->
    <el-dialog
      title="系统公告"
      :visible.sync="notificationDialogVisible"
      width="50%"
      :before-close="handleDirectClose"
      center
      :custom-class="shrinkClass"
      @close="shrinkClass = ''">
      <div class="notification-dialog-content">
        <el-carousel 
          height="200px" 
          :autoplay="true" 
          :interval="5000"
          indicator-position="outside"
          arrow="always">
          <el-carousel-item v-for="(item, index) in notificationList" :key="index">
            <div class="notification-item">
              <div class="notification-time">{{ item.sendTime }}</div>
              <div class="notification-content">{{ item.content }}</div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="notificationDialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getCategoryList } from "@/api/category/category";
import { getTeacherList } from "@/api/profile/profile";
import { getTeacherPhone } from "@/api/profile/profile";
import { getParentPhone } from "@/api/parentProfile/parentProfile";
import { getUserNameByID } from "@/api/system/user";
import { listNotification } from "@/api/system/notification";

export default {
  name: 'UserHome',
  data() {
    return {
      categoryList: [],
      teacherList: [],
      defaultAvatar: require('@/assets/images/profile.jpg'),
      notificationList: [],
      notificationDialogVisible: false,
      userName: '',
      roleName: '',
      shrinkClass: '',
      carouselItems: [
        {
          image: require('@/assets/images/home1.jpg'),
          title: '优质家教服务',
          description: '专业教师团队，一对一辅导，助力学生成长'
        },
        {
          image: require('@/assets/images/home2.jpg'),
          title: '灵活教学方式',
          description: '线上线下结合，时间地点灵活，满足个性化需求'
        },
        {
          image: require('@/assets/images/home3.jpg'),
          title: '严格教师筛选',
          description: '严格把关教师资质，确保教学质量'
        },
        {
          image: require('@/assets/images/home4.jpg'),
          title: '全程服务保障',
          description: '专业客服团队，全程跟踪服务，保障教学质量'
        }
      ]
    }
  },
  created() {
    this.roleName = localStorage.getItem("roleName")
    this.getUserNameByID(localStorage.getItem("userId"));
    if (localStorage.getItem("roleName") === "教员") {
      this.getTeacherPhone(localStorage.getItem("userId"));
    } else if (localStorage.getItem("roleName") === "家长") {
      this.getParentPhone(localStorage.getItem("userId"));
    }
    this.getCategoryList();
    this.getTeacherList();
    // 获取公告列表
    this.getNotificationList();
  },
  methods: {
    goToTeacherDetail(teacher){
      this.$router.push({
        path: '/teacherDetail',
        query: {
          id: teacher.teacherId
        }
      })
    },
    // 获取科目分类列表
    async getCategoryList() {
      try {
        const response = await getCategoryList();
        this.categoryList = response;
      } catch (error) {
        console.error('获取分类列表失败:', error);
      }
    },

    // 获取推荐老师列表
    async getTeacherList() {
      try {
        const response = await getTeacherList();
        // 对教员列表按星级进行降序排序
        this.teacherList = response.sort((a, b) => {
          // 确保rating存在，如果不存在则默认为0
          const ratingA = a.rating || 0;
          const ratingB = b.rating || 0;
          return ratingB - ratingA;
        });
        console.log(this.teacherList);
      } catch (error) {
        console.error('获取教师列表失败:', error);
      }
    },
    goToLogin() {
      this.$router.push('/login')
    },
    goToRequestTutor() {
      this.$router.push('/square')
    },
    goToBecomeTutor() {
      this.$router.push('/square')
    },
    goToSubject(category) {
      this.$router.push({
        path: '/hone/subject',
        query: {
          id: category.categoryId,
        }
      })
    },
    // 获取公告列表
    async getNotificationList() {
      try {
        // 假设我们获取最新的几条公告，可以根据需要调整查询参数
        const queryParams = { pageNum: 1, pageSize: 5 };
        const response = await listNotification(queryParams);
        this.notificationList = response.rows;
        
        // 检查是否是首次登录（通过检查localStorage中是否有标记）
        const hasShownNotification = localStorage.getItem('hasShownNotification');
        if (this.notificationList.length > 0 && !hasShownNotification) {
          this.notificationDialogVisible = true;
          // 设置标记，表示已经显示过公告
          localStorage.setItem('hasShownNotification', 'true');
        }
      } catch (error) {
        console.error('获取公告列表失败:', error);
      }
    },
    handleDirectClose(done) {
      // 直接执行关闭动画逻辑
      this.shrinkClass = 'shrink-animation';
      setTimeout(() => {
        done();
        this.shrinkClass = '';
      }, 1000);
    },

    onDialogClose() {
      // 重置动画类
      this.shrinkClass = '';
    },

    handleOpenNotification() {
      // 添加安全判断
      if (this.$refs.notificationSection) {
        this.$refs.notificationSection.classList.add('click-feedback');
        setTimeout(() => {
          this.$refs.notificationSection.classList.remove('click-feedback');
        }, 300);
      }
      
      this.notificationDialogVisible = true;
    },

    // 获取教员电话
    getTeacherPhone() {
      getTeacherPhone(localStorage.getItem("userId")).then((response) => {
        console.log("获取教员电话");
        console.log(response);
        localStorage.setItem("teacherPhoneNumber", response.msg);
      });
    },
    // 获取家长电话
    getParentPhone() {
      getParentPhone(localStorage.getItem("userId")).then((response) => {
        console.log(response);
        localStorage.setItem("parentPhoneNumber", response.msg);
      });
    },
    getUserNameByID() {
      getUserNameByID(localStorage.getItem("userId")).then((response) => {
        localStorage.setItem("userName", response);
        this.userName = localStorage.getItem("userName")
      })
    },
  }
}
</script>

<style lang="scss" scoped>
/* 收缩动画 */
@keyframes shrinkToNotification {
  0% {
    transform: scale(1) translate(0,0);
    opacity: 1;
  }
  30% {
    opacity: 0.8;
  }
  100% {
    transform: scale(0.3) translate(120px, 900px); /* 根据实际位置调整 */
    opacity: 0;
  }
}

/* 修改动画样式 */
::v-deep .el-dialog.shrink-animation {
  animation: shrinkToNotification 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) !important;
  pointer-events: none; /* 防止动画期间误操作 */
  will-change: transform, opacity;
}

.app-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f6f8fc 0%, #f1f4f9 100%);
  max-width: 1440px;
  margin: 0 auto;
  box-shadow: 0 0 30px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 200px;
    background: linear-gradient(135deg, rgba(230, 30, 30, 0.05) 0%, rgba(230, 30, 30, 0.02) 100%);
    z-index: 0;
  }
}

.main-content {
  display: flex;
  margin: 20px;
  gap: 25px;
  position: relative;
  z-index: 1;

  .subject-categories {
    width: 300px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 20px;
    border-radius: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: transform 0.3s ease, box-shadow 0.3s ease;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    }

    .category-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 15px 10px;
      cursor: pointer;
      text-align: center;
      border-radius: 12px;
      transition: all 0.3s ease;

      &:hover {
        background: rgba(230, 30, 30, 0.05);
        transform: translateY(-2px);
      }

      .category-icon {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        background: rgba(230, 30, 30, 0.1);
        border-radius: 12px;
        transition: all 0.3s ease;

        img {
          transition: transform 0.3s ease;
        }

        &:hover img {
          transform: scale(1.1);
        }
      }

      span {
        font-size: 14px;
        color: #333;
        font-weight: 500;
        transition: color 0.3s ease;
      }

      &:hover span {
        color: #e61e1e;
      }
    }
  }

  .center-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 25px;
  }

  .carousel-section {
    flex: 1;
    border-radius: 16px;
    overflow: hidden;
    height: 350px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
    position: relative;

    &:hover {
      transform: translateY(-5px);
    }

    ::v-deep .el-carousel {
      height: 100%;

      .el-carousel__container {
        height: 100% !important;
      }

      .el-carousel__item {
        height: 100%;
        overflow: hidden;
      }

      // 导航箭头样式
      .el-carousel__arrow {
        width: 50px;
        height: 50px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 50%;
        transition: all 0.3s ease;

        &:hover {
          background: rgba(0, 0, 0, 0.5);
          transform: scale(1.1);
        }

        i {
          font-size: 24px;
        }
      }

      // 指示器样式
      .el-carousel__indicators {
        bottom: 20px;

        .el-carousel__button {
          width: 30px;
          height: 4px;
          border-radius: 2px;
          background: rgba(255, 255, 255, 0.5);
          transition: all 0.3s ease;
        }

        .is-active .el-carousel__button {
          background: #fff;
          width: 40px;
        }
      }
    }

    .carousel-content {
      position: relative;
      width: 100%;
      height: 100%;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;

        &:hover {
          transform: scale(1.02);
        }
      }

      .carousel-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.6));
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 40px;
        color: white;
        text-align: center;
        opacity: 0;
        transition: opacity 0.3s ease;

        h3 {
          font-size: 32px;
          font-weight: 600;
          margin-bottom: 15px;
          transform: translateY(20px);
          transition: transform 0.3s ease;
          text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        p {
          font-size: 18px;
          line-height: 1.6;
          max-width: 600px;
          transform: translateY(20px);
          transition: transform 0.3s ease 0.1s;
          text-shadow: 0 1px 2px rgba(0,0,0,0.3);
        }
      }

      &:hover .carousel-overlay {
        opacity: 1;

        h3, p {
          transform: translateY(0);
        }
      }
    }
  }

  .notification-section {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    height: 45px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(230, 162, 60, 0.15);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.4s, height 0.4s;
    }

    &:hover::after {
      width: 200%;
      height: 200%;
    }

    &.notification-active {
      box-shadow: 0 0 20px rgba(230, 162, 60, 0.2);
      transform: translateY(-2px);
      
      .notification-icon {
        color: #e61e1e;
        animation: bellRing 0.6s ease;
      }
    }

    &.click-feedback {
      transform: scale(0.98);
    }

    .notification-icon {
      font-size: 20px;
      color: #E6A23C;
      flex-shrink: 0;
      transition: all 0.3s ease;
    }

    .el-carousel {
      flex: 1;
      height: 24px;

      .el-carousel__container {
        height: 24px !important;
      }

      .notification-item {
        color: #606266;
        font-size: 14px;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
        transition: color 0.3s ease;

        &:hover {
          color: #e61e1e;
        }
      }
    }
  }

  .function-area {
    display: flex;
    justify-content: space-between;
    gap: 25px;

    .function-card {
      flex: 1;
      height: 180px;
      border-radius: 16px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
        z-index: 1;
      }

      &:hover {
        transform: translateY(-8px) scale(1.02);
        box-shadow: 0 12px 30px rgba(0,0,0,0.15);

        .card-content {
          transform: translate(-50%, -50%) scale(1.05);
        }
      }

      &.request-tutor {
        background: linear-gradient(135deg, #4CAF50, #45a049);
      }

      &.become-tutor {
        background: linear-gradient(135deg, #2196F3, #1976D2);
      }

      .card-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: white;
        z-index: 2;
        transition: transform 0.4s ease;

        h3 {
          font-size: 32px;
          margin-bottom: 15px;
          font-weight: 600;
          text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        p {
          font-size: 18px;
          opacity: 0.9;
          text-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }
      }
    }
  }

  .right-section {
    width: 280px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 25px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    border: 1px solid rgba(255, 255, 255, 0.8);
    transition: transform 0.3s ease;

    &:hover {
      transform: translateY(-5px);
    }

    .platform-logo {
      img {
        width: 140px;
        margin-bottom: 30px;
        transition: transform 0.3s ease;

        &:hover {
          transform: scale(1.05);
        }
      }
    }

    .login-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      padding: 20px;
      gap: 15px;
    }

    .login-button {
      width: 100%;
      height: 45px;
      font-size: 16px;
      font-weight: 500;
      border-radius: 12px;
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      }
    }

    .featured-tutors {
      margin-top: 35px;
      padding: 0 15px;
      text-align: left;

      h4 {
        font-size: 16px;
        color: #333;
        margin-bottom: 15px;
        padding-bottom: 8px;
        border-bottom: 2px solid rgba(230, 30, 30, 0.1);
        font-weight: 600;
      }

      ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .tutor-item {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        cursor: pointer;
        padding: 10px;
        border-radius: 12px;
        transition: all 0.3s ease;

        &:hover {
          background: rgba(230, 30, 30, 0.05);
          transform: translateX(5px);
        }

        .tutor-avatar-small {
          width: 45px;
          height: 45px;
          border-radius: 12px;
          margin-right: 12px;
          object-fit: cover;
          flex-shrink: 0;
          border: 2px solid rgba(230, 30, 30, 0.1);
          transition: all 0.3s ease;

          &:hover {
            transform: scale(1.1);
            border-color: rgba(230, 30, 30, 0.3);
          }
        }

        .tutor-info-small {
          display: flex;
          flex-direction: column;
          overflow: hidden;

          .tutor-name {
            font-size: 15px;
            color: #333;
            font-weight: 500;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 4px;
          }

          .tutor-school {
            font-size: 13px;
            color: #666;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}

.teacher-section {
  padding: 30px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  margin: 20px;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  border: 1px solid rgba(255, 255, 255, 0.8);

  .section-title {
    font-size: 22px;
    color: #333;
    margin-bottom: 25px;
    padding-left: 15px;
    border-left: 4px solid #e61e1e;
    font-weight: 600;
  }

  .teacher-list {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    padding: 15px 5px;
    scrollbar-width: thin;
    scrollbar-color: #e61e1e #f5f5f5;

    &::-webkit-scrollbar {
      height: 8px;
    }

    &::-webkit-scrollbar-track {
      background: #f5f5f5;
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: #e61e1e;
      border-radius: 4px;
      
      &:hover {
        background: #c41818;
      }
    }

    .teacher-card {
      min-width: 280px;
      background: white !important;
      border: 1px solid rgba(230, 30, 30, 0.1);
      border-radius: 16px;
      padding: 20px;
      display: flex;
      gap: 20px;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

      &:hover {
        transform: translateY(-8px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        border-color: rgba(230, 30, 30, 0.2);
      }

      .teacher-avatar {
        width: 90px;
        height: 90px;
        border-radius: 16px;
        overflow: hidden;
        border: 2px solid rgba(230, 30, 30, 0.1);
        transition: all 0.3s ease;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.3s ease;
        }

        &:hover img {
          transform: scale(1.1);
        }
      }

      .teacher-info {
        flex: 1;

        .teacher-name {
          font-size: 18px;
          font-weight: 600;
          margin: 0 0 8px;
          color: #333;
        }

        .teacher-school {
          font-size: 15px;
          color: #666;
          margin: 0 0 8px;
        }

        .teacher-subject {
          font-size: 14px;
          color: #888;
          margin: 0 0 12px;
        }

        .el-rate {
          margin-top: 5px;
        }
      }
    }
  }
}

/* 系统公告弹窗优化 */
.el-dialog__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;

  ::v-deep .el-dialog {
    margin: 0 !important;
    top: auto;
    left: auto;
    transform-origin: top center; /* 设置缩放原点为顶部居中 */
    position: fixed !important; /* 确保定位准确 */
    z-index: 2000 !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    
    // 标题栏样式
    .el-dialog__header {
      background: linear-gradient(135deg, #a63046, #b11717);
      padding: 18px 24px;
      border-bottom: none;
      
      .el-dialog__title {
        color: white;
        font-size: 20px;
        font-weight: 600;
        letter-spacing: 1px;
      }
      
      .el-dialog__headerbtn {
        top: 22px;
        .el-icon-close:before {
          color: rgba(255,255,255,0.9);
        }
        &:hover .el-icon-close {
          background: rgba(255,255,255,0.1);
          border-radius: 50%;
        }
      }
    }

    // 内容区域优化
    .notification-dialog-content {
      .el-carousel {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);

        // 导航箭头样式
        ::v-deep .el-carousel__arrow {
          width: 40px;
          height: 40px;
          background: rgba(0,0,0,0.3);
          &:hover {
            background: rgba(0,0,0,0.5);
          }
        }

        // 指示器样式
        ::v-deep .el-carousel__indicator {
          padding: 8px 4px;
          .el-carousel__button {
            width: 28px;
            border-radius: 3px;
            background: #ddd;
            transition: all 0.3s;
          }
          &.is-active .el-carousel__button {
            background: #e61e1e;
            width: 35px;
          }
        }
      }

      .notification-item {
        padding: 30px;
        background: linear-gradient(145deg, #ffffff, #f8f8f8);
        min-height: 200px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .notification-time {
          font-size: 14px;
          color: #95a5a6;
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          &::before {
            content: "\e79d";
            font-family: element-icons;
            margin-right: 6px;
            font-size: 14px;
          }
        }

        .notification-content {
          font-size: 15px;
          line-height: 1.8;
          color: #34495e;
          max-width: 80%;
          text-align: justify;
          flex: 1;
          // 系统公告内容的首字样式
          &::first-letter {
            initial-letter: 2;
            font-weight: bold;
            margin-right: 4px;
            color: #e61e1e;
            font-size: 200% !important;
            display: inline-block;
            transition: all 0.3s ease;
            transform-origin: left bottom;   /* 从左下角开始缩放 */
    
            /* 悬停时更大+轻微旋转 */
            &:hover {
              transform: scale(1.2) rotate(-3deg);
              text-shadow: 1px 1px 2px rgba(230,30,30,0.2);
            }

            /* 首字母入场动画 */
            animation: letterPop 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) both;
          }
        }
      }
    }

    // 底部按钮样式
    .el-dialog__footer {
      padding: 20px;
      .dialog-footer {
        .el-button {
          padding: 10px 28px;
          border-radius: 6px;
          transition: all 0.3s;
          &:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(230,30,30,0.2);
          }
        }
      }
    }
  }
}

/* 首字母弹出动画 */
@keyframes letterPop {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(20px);
  }
  80% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes dialogEnter {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

// 铃铛摇晃动画
@keyframes bellRing {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  50% { transform: rotate(-15deg); }
  75% { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}

</style>
